import React, { Component } from 'react'

export default class CmpState extends Component {

  // state组件内部使有的数据源

  // 方案1  成员属性
  /* state = {
    username: '张三'
  }
 */
  constructor(props) {
    super(props);
    // 方案2 构造方法初始化state数据
    this.state = {
      // username: '李四'
      username: this.props.username,
      count: 100
    }
  }

  render() {
    return (
      <div>
        得到state中的数据为：{this.state.username}
        <hr />
        <h3>{this.state.count}</h3>
        <button onClick={this.incr.bind(this)}>自增一下</button>
      </div>
    )
  }

  incr() {
    // 更新数据的同时，更新ui显示
    // 方案1 对象写法 不支持并发处理  同步修改
    /* this.setState({
      count: ++this.state.count
    }) */

    // 方案2 异步处理，支持并处理  ssf  官方推荐写法
    /* this.setState((state) => {
      return {
        count: ++state.count
      }
    }) */
    // 简写
    this.setState((state) => ({
      count: ++state.count
    }))



  }

}
